import "./App.css";
import React from "react";
import Modal from "./components/modal";
import Comp from './components/comp'
import { MyContext } from "./context/index";

class App extends React.PureComponent {
  state = {
    show: false,
  };
  open = () => {
    this.setState({
      show: true,
    });
  };
  close = () => {
    this.setState({
      show: false,
    });
  };  
  constructor(props) {
    super(props);

    this.changeTheme = (theme) => {
      this.setState({
        theme: theme
      });

      document.documentElement.className = theme

    }

    this.state = {
      theme: "light",
      themeList: [
        {
          name: "高亮主题",
          theme: "light",
        },
        {
          name: "黑暗主题",
          theme: "dark",
        },
      ],
      changeTheme: this.changeTheme
    }
  }
  render() {
    const { show } = this.state;
    return (
      <MyContext.Provider value={this.state}>
        <Comp></Comp>
        <div>
          <button onClick={() => this.open()}>打开弹框</button>
          <Modal show={show} close={this.close}>
            <div className="con">
              <h2>微信扫一扫</h2>
              <h2>分享到朋友群获取积分</h2>
              <img src="https://robohash.org/1231" alt="" />
            </div>
          </Modal>
        </div>
      </MyContext.Provider>
    );
  }
}

export default App;
